import lottie from "lottie-web"
import {watch} from "vue";
/**
 * 
 * @param container 容器
 * @param isLoop 是否循环
 * @param isAutoPlay 是否自动播放 
 * @param renderer 选择渲染方式
 * @param animationData 动画数据
 * @returns {AnimationItem} 返回Lotties中的动画对象
 */
export function loadAnim (container,
isLoop,
isAutoPlay,
renderer,
animationData){
	return lottie.loadAnimation({
		container:container,
		renderer:renderer,
		loop:isLoop,
		autoplay:isAutoPlay,
		animationData:animationData
	})
}

/**
 * 
 * @param container 页面元素 这是一个数组
 * @constructor
 */
export function ScrollWindows (container) {
	let value = window.scrollY;
	let left = container[0];
	let center = container[1];
	let right = container[2];
	left.style.left =`${-value*0.2*1.02}px`
	right.style.left = `${value*0.2*1.02}px`
	left.querySelector('.card').style.opacity = `${1 - value * 0.01 / 5}`
	center.querySelector('.card').style.opacity = `${1 - value * 0.01 / 5}`
	right.querySelector('.card').style.opacity = `${1 - value * 0.01 / 5}`
	let left_style = window.getComputedStyle(left.querySelector('.card'));
	if(left_style.opacity === '0'){
		left.style.pointerEvents = 'none'
		center.style.pointerEvents = 'none'
		right.style.pointerEvents = 'none'
	}
	if(left_style.opacity !== '0'){
		left.style.pointerEvents = 'auto'
		center.style.pointerEvents = 'auto'
		right.style.pointerEvents = 'auto'
	}
}
export  function ScrollAnimContainer(container,beforePos,animOver){ 	
	beforePos= container.style.top.substring(0,container.style.top.length-2)
	container.style.top  = `${-window.scrollY*0.5-beforePos}px`
}